<template>
  <div class="rightContainer">
    <div class="rightContainer_summary">
      <div class="rightContainer_summary_left">
        <div v-loading="rightLoading" class="rightContainer_summary_left_content">
          <div v-if="csjProgramName!==&quot;&quot;" class="rightContainer_summary_left_content_desc">
            <div style="flex:5">
              <div class="rightContainer_summary_left_content_desc_title common_desc_left">{{ csjProgramName }}</div>
              <!-- <div class="rightContainer_summary_left_content_desc_enterprise common_desc_left">原单位：{{ csjEnterpriseName }}</div> -->
              <div class="rightContainer_summary_left_content_desc_enterprise_four">
                <div v-for="(item,index) in fourList " :key="index" class="four_item">
                  <div :title="item.split('-')[0]" class="four_item_number">{{ item.split('-')[0].length>10?item.split('-')[0].substring(0,10)+'...': item.split('-')[0] }}</div>
                  <div class="four_item_text">{{ item.split('-')[1] }}(万元)</div>
                </div>
              </div>
            </div>
            <div style="flex:2.3;height: 168px;margin-top: 20px;" class="circle_container">
              <div style="display:flex">
                <div style="flex:1;text-align: center;">
                  <el-progress :width="98" :stroke-width="9" type="circle" :percentage="zjsyl" />
                  <div class="circle_title">资金使用率</div>
                </div>
                <div style="margin-left:20px;flex:1;text-align: center;">
                  <el-progress :width="98" :stroke-width="9" type="circle" :percentage="xmwcjd" />
                  <div class="circle_title">项目完成度</div>
                </div>
              </div>
            </div>
          </div>
          <div v-else style="text-align:center;padding-top:15px">
            <img style="width:200px" src="@/assets/images/homePage/noReport.png">
            <div>暂无信息</div>
          </div>
        </div>
      </div>
      <div class="rightContainer_summary_right">
        <div v-loading="rightLoading" class="rightContainer_summary_right_content">
          <div v-if="csjProgramName!==&quot;&quot;">
            <img class="rightContainer_summary_right_content_img" src="../../../../assets/images/taskPage/rightBg.png">
            <div class="rightContainer_summary_right_content_title">
              项目任务
            </div>
            <div class="rightContainer_summary_right_content_desc">
              <div v-if="reportStatus===&quot;&quot;" class="desc_noTask">
                <div class="desc_title">
                  您还未发布任务
                </div>
                <div style="margin-top:5px">
                  <el-button class="special_button" type="primary" @click="gotoCreatTask(0)">发布任务</el-button>
                </div>
              </div>
              <div v-else style=" padding: 0px 20px;margin-top: 25px;">
                <!--  空：未开始 1进行中 2已完成 3延期 -->
                <div class="desc_title1">任务状态:
                  <span v-if="reportStatus===3" style="margin-left:5px">
                    <span class="commonSpan delay" />
                    延期
                  </span>
                  <span v-if="reportStatus===2" style="margin-left:5px">
                    <span class="commonSpan finish" />
                    完成
                  </span>
                  <span v-if="reportStatus===1" style="margin-left:5px">
                    <span class="commonSpan running" />
                    进行中
                  </span>
                </div>
                <div class="desc_title1">
                  任务时间:
                  <span>
                    {{ startTime }} ～ {{ endTime }}
                  </span>
                </div>
                <div class="do_action">
                  <span class="commonDo" @click="gotoCreatTask(2)">编辑任务</span>
                  <span class="commonDo" @click="gotoCreatTask(1)">查看详情</span>
                </div>
              </div>
            </div>
          </div>
          <div v-else style="text-align:center;padding-top:15px">
            <img style="width:200px" src="@/assets/images/homePage/noReport.png">
            <div>暂无信息</div>
          </div>
        </div>
      </div>
    </div>
    <div class="rightContainer_table">
      <div class="rightContainer_table_detail">
        <taskTable ref="taskTable" />
      </div>
    </div>
    <div class="rightContainer_dialog">
      <taskDialog ref="taskDialog" is-flag="isFlag" />
    </div>
    <div class="rightContainer_table">
      <tableDialog ref="tableDialog" />
    </div>
  </div>
</template>

<script>
import taskTable from '../TaskTable/index.vue';
import tableDialog from '../TableDialog/index.vue';
import taskDialog from '../TaskDialog/index.vue';
export default {
  components: {
    taskTable,
    taskDialog,
    tableDialog
  },
  props: {
    reportStatus: {
      type: [String, Number],
      default: ''
    },
    startTime: {
      type: String,
      default: ''
    },
    endTime: {
      type: String,
      default: ''
    },
    csjEnterpriseName: {
      type: String,
      default: ''
    },

    csjProgramName: {
      type: String,
      default: ''
    },
    csjProgramGuid: {
      type: Number,
      default: 0
    },
    rightLoading: {
      type: Boolean,
      default: false
    },
    zjsyl: {
      type: Number,
      default: 0
    },
    xmwcjd: {
      type: Number,
      default: 0
    },

    fourList: {
      type: Array,
      default: () => []
    },
    participantsList: {
      type: Array,
      default: () => []
    },
    taskGuid: {
      type: String,
      default: ''
    },
    taskName: {
      type: String,
      default: ''
    },
    remark: {
      type: String,
      default: ''
    },
    annexIds: {
      type: [String, Array],
      default: () => []
    },
    guid: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isFlag: 0
    };
  },
  methods: {
    gotoCreatTask(type) {
      const copyParticipantsList = JSON.parse(JSON.stringify(this.participantsList));// 深拷贝常用方法
      this.$refs.taskDialog.toData = [];
      this.$refs.taskDialog.participantsList = [];
      this.$refs.taskDialog.dialogVisible = true;
      this.$refs.taskDialog.form.programGuid = this.csjProgramGuid;
      this.$refs.taskDialog.form.programName = this.csjProgramName;
      this.$refs.taskDialog.form.taskGuid = this.taskGuid;
      this.$refs.taskDialog.annexIds = this.annexIds;
      this.$refs.taskDialog.form.startTime = this.startTime;
      this.$refs.taskDialog.form.endTime = this.endTime;
      this.$refs.taskDialog.form.taskName = this.taskName;
      this.$refs.taskDialog.form.remark = this.remark;
      this.$refs.taskDialog.guid = this.guid;
      // 用户id
      this.$refs.taskDialog.form.editUser = localStorage.getItem('xcUserId');
      // 用户名称
      this.$refs.taskDialog.form.editUserName = localStorage.getItem('xcNickName');
      if (type === 0) {
        this.$refs.taskDialog.isShowDisabled = false;
        this.$refs.taskDialog.title = '发布任务';
        this.$refs.taskDialog.isFlag = 0;
        // 参与人员
        this.$refs.taskDialog.participantsList = this.participantsList;
        this.$refs.taskDialog.titleDesc = '你确定要创建该项目吗？';
        setTimeout(() => {
          this.$refs.taskDialog.$refs.tree.setCheckedKeys([]);
        }, 200);
      } else if (type === 2) {
        this.$refs.taskDialog.titleDesc = '你确定要编辑该项目吗？';
        this.$refs.taskDialog.title = '编辑任务';
        this.$refs.taskDialog.isFlag = 2;
        const isCheckList1 = [];
        const listSign = [];
        copyParticipantsList.map(o => {
          if (o.children) {
            o.children.map(b => {
              if (b.isCheck === 1) {
                listSign.push(b.uuid);
                isCheckList1.push(b.uuid);
                // 项目已经完成
                if (this.reportStatus === 2) {
                  listSign.push(b.cEnterpriseCode);
                  b.disabled = true;
                  o.disabled = true;
                }
              }
            });
          }
        });
        if (this.reportStatus === 2) {
          copyParticipantsList.map(o => {
            if (o.children) {
              o.children.map(b => {
                listSign.map(c => {
                  if (c === b.cEnterpriseCode) {
                    b.disabled = true;
                  }
                });
              });
            }
          });
        }
        this.$refs.taskDialog.participantsList = copyParticipantsList;
        setTimeout(() => {
          this.$refs.taskDialog.$refs.tree.setCheckedKeys([]);
          this.$refs.taskDialog.$refs.tree.setCheckedKeys(isCheckList1);
          this.$refs.taskDialog.toData = isCheckList1;
        }, 500);
      } else if (type === 1) {
        this.$refs.taskDialog.isShowDisabled = true;
        this.$refs.taskDialog.title = '查看任务';
        const isCheckList = [];
        this.$refs.taskDialog.isFlag = 1;
        copyParticipantsList.map(o => {
          if (o.children) {
            o.children.map(b => {
              b.disabled = true;
              if (b.isCheck === 1) {
                isCheckList.push(b.uuid);
              }
            });
          }
          o.disabled = true;
        });
        // 参与人员
        this.$refs.taskDialog.participantsList = copyParticipantsList;
        setTimeout(() => {
          this.$refs.taskDialog.$refs.tree.setCheckedKeys([]);
          this.$refs.taskDialog.$refs.tree.setCheckedKeys(isCheckList);
          this.$refs.taskDialog.toData = isCheckList;
        }, 500);
      }
    }
  }

};
</script>

<style scoped lang='scss'>
  .circle_container /deep/ .el-progress__text{
    font-size: 20px !important;
    font-weight: bolder;
  }
  .rightContainer_summary{
    display: flex ;
  }
  .rightContainer_summary_left{
    flex:4;
    padding: 0px 10px 0px 10px;
     height:180px;
  }
  .rightContainer_summary_right{
    flex:2;
  }
  .rightContainer_summary_left_content,.rightContainer_summary_right_content{
    background: #ffffff;
    border-radius: 4px;
    height:195px;
    position: relative;
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.1);
  }
  .rightContainer_summary_right_content_img{
    width: 180px;
    position: absolute;
    top: 15px;
    right: 20px;
  }
  .rightContainer_summary_right_content_title{
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    text-align: left;
    color: rgba(0,0,0,0.85);
    line-height: 22px;
    padding: 10px;
    font-size: 16px;
  }
  .rightContainer_summary_right_content_desc{
    height: 110px;
    text-align: center;
  }
  .desc_title{
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    color: rgba(0,0,0,0.65);
  }
  .special_button{
    width: 180px;
    height: 38px;
    opacity: 1;
    background: #1890ff;
    border-radius: 2px;
  }
  .desc_noTask{
    line-height: 80px
  }
  .desc_title1{
    text-align: left;
    margin-top: 25px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    text-align: left;
    color: rgba(0,0,0,0.65);
  }
  .commonSpan{
  width: 6px;
  height: 6px;
  opacity: 1;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}
.running{
   background: #1880ff;
}
.noRunning{
  background: #d8d8d8;
}
.delay{
  background: #ff4d4f
}
.finish{
  background: #52c41a;
}
.rightContainer_summary_left_content_desc{
  display: flex;
  padding: 10px 20px
}
.common_desc_left{
  margin-top: 10px;
  font-family: PingFangSC, PingFangSC-Medium;
  text-align: left;
  width: calc(33vw);
  padding: 0px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rightContainer_summary_left_content_desc_title{
  font-weight: 500;
  color: #333333;
  font-size: 21px
}
.rightContainer_summary_left_content_desc_enterprise{
  font-size: 13px;
  font-weight: 500;
  color: rgba(0,0,0,0.45);
}
.circle_title{
    text-align: center;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    color: rgba(0,0,0,0.65);
    margin-top: 10px;
}
.rightContainer_summary_left_content_desc_enterprise_four{
    margin-top: 55px;
    padding: 5px;
    display: flex
}
.four_item{
  flex:1;
  margin-right: 10px
}
.four_item_number{
  font-size: 30px;
  font-family: DINCondensed, DINCondensed-Bold;
  font-weight: 700;
  text-align: left;
  color: #faad14;
  line-height: 36px;
  cursor: pointer;
}
.four_item_text{
  font-size: 13px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  color: rgba(0,0,0,0.45);
  line-height: 22px;
  margin-top: 3px;
  width: 125px;
}
.rightContainer_table{
  margin-top: 15px;
  padding-left: 10px;
}
.rightContainer_table_detail{
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.1);
  padding: 8px
}
.do_action{
  position: absolute;
  bottom: 10px;
  right: 20px;
}
.commonDo{
    margin-right: 10px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    text-decoration: underline;
    text-align: left;
    color: #1890ff;
    line-height: 22px;
    cursor: pointer;
}

</style>
